<template>
  <div class="search">
    <!-- 头部 -->
    <van-nav-bar
      left-arrow
      @click-left="$router.back()"
    >
      <template #title>
        <my-search class="search_box"></my-search>
      </template>
    </van-nav-bar>

    <!-- 下拉选择框 -->
    <van-dropdown-menu class="my_menu" active-color="#21b97a">
      <!-- 区域 -->
      <van-dropdown-item title="区域" ref="item">
        <van-picker value-key="label" :columns="columns">
          <!-- 下方确认取消按钮 -->
          <template #columns-bottom>
            <div class="change_btn">
              <van-button @click="$refs.item.toggle()" class="cancel-btn" type="primary" block>取消</van-button>
              <van-button class="confirm-btn" type="primary" block>确认</van-button>
            </div>
          </template>
        </van-picker>
      </van-dropdown-item>

      <!-- 方式 -->
      <van-dropdown-item title="方式" ref="item2">
        <van-picker :columns="columns_rentType">
          <!-- 下方确认取消按钮 -->
          <template #columns-bottom>
            <div class="change_btn">
              <van-button @click="$refs.item2.toggle()" class="cancel-btn" type="primary" block>取消</van-button>
              <van-button class="confirm-btn" type="primary" block>确认</van-button>
            </div>
          </template>
        </van-picker>
      </van-dropdown-item>

      <!-- 租金 -->
      <van-dropdown-item title="租金" ref="item3">
        <van-picker :columns="columns_price">
          <!-- 下方确认取消按钮 -->
          <template #columns-bottom>
            <div class="change_btn">
              <van-button @click="$refs.item3.toggle()" class="cancel-btn" type="primary" block>取消</van-button>
              <van-button class="confirm-btn" type="primary" block>确认</van-button>
            </div>
          </template>
        </van-picker>
      </van-dropdown-item>

      <!-- 筛选 -->
      <van-dropdown-item @open="isShow=true" title="筛选" ref="item4">
      </van-dropdown-item>
    </van-dropdown-menu>
    <div class="pop_btn">
      <!-- 筛选的弹出层 -->
      <van-popup :duration="0" v-model="isShow" @close="isShowBtn=false" @open="isShowBtn=true" position="right" :style="{ height: '100%', width:'80%' }" >
        <house-type ref="houseType" :houseData="houseData"></house-type>
      </van-popup>
      <!-- 弹出层下方确认取消按钮 -->
      <div class="change_btn house-type-btn" v-if="isShowBtn">
        <van-button class="cancel-btn" @click="onReset" type="primary" block>清除</van-button>
        <van-button class="confirm-btn" type="primary" block>确认</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getConditionData } from '@/api/houses.js'
import { mapState } from 'vuex'
import MySearch from '@/components/MySearch'
import HouseType from './components/HouseType.vue'
import { Toast } from 'vant'
export default {
  data () {
    return {
      isShowBtn: false,
      isShow: false,
      houseData: {},
      columns: [],
      columns_rentType: [],
      columns_price: []
    }
  },
  components: { MySearch, HouseType },
  computed: {
    ...mapState(['cityInfo'])
  },
  created () {
    Toast.loading({
      duration: 0,
      message: '加载中...',
      forbidClick: true
    })
    this.getConditionData()
  },

  methods: {
    // 清除筛选中的选择
    onReset () {
      this.$refs.houseType.onReset()
    },
    // 房屋查询条件的筛选数据处理
    houseDataSort (data) {
      for (const key in data) {
        if (Array.isArray(data[key])) {
          this.houseData[key] = []
          data[key].forEach(item => (this.houseData[key].push({
            ...item,
            isCheck: false
          })))
        }
      }
    },
    // 房屋查询条件数据整理
    conditionDataSort (data) {
      return {
        text: data.label,
        children: data.children.map(item => {
          return {
            text: item.label,
            children: item.children ? item.children.map(item => {
              return {
                text: item.label
              }
            }) : [{ text: '' }]
          }
        })
      }
      // console.log(newData)
    },
    // 房屋查询条件数据整理新
    conditionDataSort2 (data) {
      data.children[0].children = [{ label: '' }]
      return data
    },
    // 获取房屋查询条件
    async getConditionData () {
      try {
        const res = await getConditionData(this.cityInfo.id)
        console.log(res.data.body)
        // 房屋查询条件存储
        this.houseDataSort(res.data.body)
        this.columns = [this.conditionDataSort2(res.data.body.area), this.conditionDataSort2(res.data.body.subway)]
        this.columns_rentType = res.data.body.rentType.map(item => item.label)
        this.columns_price = res.data.body.price.map(item => item.label)
        Toast.clear()
      } catch (error) {
        console.dir(error)
      }
    }
    // onConfirm () {
    //   this.$refs.item.toggle()
    // }
  }
}
</script>

<style scoped lang='less'>
.search{
  // 头部样式
  .van-nav-bar{
  background: #21b97a;

    /deep/.van-nav-bar__title{
      color: #fff;
      font-size: 18px;
    }

    /deep/.van-icon-arrow-left{
      color: #fff;
    }

    /deep/.van-nav-bar__title{
      margin-left: 35px;
      max-width: 90%;
      // 搜索框样式
      .search_box{
        background: rgba(0, 0, 0, 0);
      }
    }
  }

  // 下拉框样式
  /deep/.my_menu{

    .van-dropdown-menu__bar{
      height: 40px;
    }
  }

  // 下方确认取消按钮样式
  .change_btn{
      display: flex;
      height: 50px;
      align-items: flex-end;
      border-top: 1px solid #e9e9e9;
      .van-button{
        height: 50px;
        font-size: 18px;
        font-family: "Microsoft YaHei";
        border: none;
      }

      // 取消按钮
      .cancel-btn{
        flex: 1;
        color: #21b97a;
        background-color: #fff;
      }
      // 确认按钮
      .confirm-btn{
        flex: 2;
        color: #fff;
        background-color: #21b97a;
      }
  }
  // 弹出层按钮样式
  .house-type-btn{
    z-index: 999999999;
    position: fixed;
    bottom: 0;
    left: 80px;
    right: 0;
  }
  .pop_btn{
    position: relative;
  }
}
</style>
